<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择框</title>
	</head>
	<style>
		.select{
			width: 300px;
			margin-top: 100px;
			margin-left: 500px;
		}
		.select input{
			width: 300px;
			border: 1px solid #2d8cf0;
			outline: none;
			padding: 10px;
			box-sizing: border-box;   /**标准盒模型，盒子里面的东西不会被撑大**/
		}
		.select input:focus{
			border: 1px solid #F56C6C;
		}
		
		.option{
			display: none;
			position: absolute;
			margin-top: 10px;
			width: 300px;
			border: 1px solid #e4e7ed;
			box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); 
			box-sizing: border-box;
			background-color: white;
		}
		
		.option li{
			z-index: 999;
			margin-top: 5px;
			margin-bottom: 5px;
			line-height: 30px;
			padding-left: 10px ;
			list-style: none;
			color: #606266;
			background-color: white;
		}
		
		.option li:hover{
			background-color: #f5f7fa;
		}
		
		.option::before{
			content: '';
			display: block;
			position: absolute;
			width: 10px;
			height: 10px;
			top: -6px;
			left: 10px;
			transform: rotate(-45deg);
			background-color: white;
			border: 1px;
			border-style: solid;
			border-color: #e4e7ed #e4e7ed transparent transparent;
		}
		

		
	</style>
	<body>
		<div class="select" id="select">
			<input>
		</div>
		
		
		<script>
			
			let map={};
			
			function rendor(id){
				if(map[id]==undefined){
					let dom=document.getElementById(id)
					let option=createDom();
					document.body.appendChild(option);
					let json={};
					dom.addEventListener('click',(event)=>{
						option.style.display="block";
						option.style.left = dom.offsetLeft + "px";
						option.style.top = dom.offsetTop + dom.offsetHeight + "px";
					})
					
					option.childNodes.forEach(node=>{
						node.addEventListener('click',(event)=>{
							dom.value=event.target.textContent;
							option.style.display="none";
						})
					})
					json.dom=dom;
					json.option=option;
					map[id]=json;
				}
				
			}
			
			function createDom(){
				let div=document.createElement('div');
				
				let li1=document.createElement('li');
				var item1 = document.createTextNode("选项一");
				li1.appendChild(item1)
				
				let li2=document.createElement('li');
				var item2 = document.createTextNode("选项二");
				li2.appendChild(item2)
				
				div.appendChild(li1);
				div.appendChild(li2);
				
				div.classList.add('option')
				return div;
			}
			rendor('select');
			
		</script>
	</body>
</html>